const { resolve, join } = require("path");
const merge = require("webpack-merge");
const { bases } = require("./webpack.base");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const PurgecssWebpackPlugin = require("purgecss-webpack-plugin");
const assets_size = require("./plugins/size");
const FileListPlugin = require("./plugins/file");
const bundle = require("./plugins/bundle");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const glob = require("glob"); // 文件匹配模式
function resolve1(dir) {
  return join(__dirname, dir);
}
const PATHS = {
  src: resolve1("src")
};
module.exports = merge(bases, {
  // webpack基于node构建的
  mode: process.env.NODE_ENV, // production
  devtool: "hidden-source-map",
  entry: [`${process.cwd()}/src/main.js`],
  output: {
    filename: "main.[name].js", // 通过热加载输出script文件挂载在目录与index.HTML一样
    path: resolve(process.cwd(), "dist")
  },
  resolve: {
    fallback: {
      zlib: require.resolve("browserify-zlib"),
      stream: require.resolve("stream-browserify")
    }
    // fallback: { zlib: false },
  },
  optimization: {
    minimize: true,
    minimizer: [
      new PurgecssWebpackPlugin({
        paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
      }),
      new OptimizeCssAssetsPlugin({}),
      new TerserPlugin({})
    ],
    splitChunks: {
      chunks: "all", // 有效值为 `all`，`async` 和 `initial`
      // minSize: 20000, // 生成 chunk 的最小体积（≈ 20kb)
      // minRemainingSize: 0, // 确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块
      // minChunks: 1, // 拆分前必须共享模块的最小 chunks 数。
      // maxAsyncRequests: 30, // 最大的按需(异步)加载次数
      // maxInitialRequests: 30, // 打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件）
      // enforceSizeThreshold: 50000,
      cacheGroups: {
        libs: {
          name: "chunk-libs",
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: "initial" // only package third parties that are initially dependent
        },
        Vue: {
          name: "chunk-Vue", // split  into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?vue(.*)/ // in order to adapt to cnpm
        },
        echarts: {
          name: "chunk-echarts", // split  into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?echarts(.*)/ // in order to adapt to cnpm
        }
      }
    }
  },
  performance: {
    hints: "warning", // false关闭提示 下面设置就没必要了
    // 入口起点的最大体积
    maxEntrypointSize: 50000000,
    // 生成文件的最大体积
    maxAssetSize: 30000000,
    // 只给出 js 文件的性能提示
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith(".js");
    }
  },
  module: {
    rules: [
      {
        test: /\.(s[ac]|c)ss$/i,
        use: [
          // MiniCssExtractPlugin.loader,
          // MiniCssExtractPlugin.loader,
          "style-loader",
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new BundleAnalyzerPlugin({
      //  可以是`server`，`static`或`disabled`。
      //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
      //  在“静态”模式下，会生成带有报告的单个HTML文件。
      //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
      analyzerMode: "server",
      //  将在“服务器”模式下使用的主机启动HTTP服务器。
      analyzerHost: "127.0.0.1",
      //  将在“服务器”模式下使用的端口启动HTTP服务器。
      analyzerPort: 8081,
      //  路径捆绑，将在`static`模式下生成的报告文件。
      //  相对于捆绑输出目录。
      reportFilename: "report.html",
      //  模块大小默认显示在报告中。
      //  应该是`stat`，`parsed`或者`gzip`中的一个。
      //  有关更多信息，请参见“定义”一节。
      defaultSizes: "parsed",
      //  在默认浏览器中自动打开报告
      openAnalyzer: true,
      //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
      generateStatsFile: false,
      //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
      //  相对于捆绑输出目录。
      statsFilename: "stats.json",
      //  stats.toJson（）方法的选项。
      //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
      //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
      statsOptions: null,
      logLevel: "info" // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
      // analyzerMode: 'disabled',  // 不启动展示打包报告的http服务器
      // generateStatsFile: true, // 是否生成stats.json文件
    }),
    new FileListPlugin(),
    new assets_size(),
    new bundle(),
    // new MiniCssExtractPlugin({
    //   // 对css文件重命名
    //   filename: "/css/[name].[hash:8].css",
    // }),
    new CopyWebpackPlugin([
      {
        from: resolve(process.cwd(), "./static"),
        to: `./static`,
        ignore: [".*"]
      }
    ]),
    new CleanWebpackPlugin(),
    new CompressionPlugin({
      // asset: "[path].gz[query]", //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串

      algorithm: "gzip", //算法

      test: new RegExp(
        "\\.(js|css)$" //压缩 js 与 css
      ),

      threshold: 10240, //只处理比这个值大的资源。按字节计算

      minRatio: 0.8
    }) //只有压缩率比这个值小的资源才会被处理
  ]
});
